<!--搜索结果-->
<mat-tab-group mat-align-tabs="start" *ngIf="showPrompt">
    <mat-tab label="{{'search.tips.title' | translate}}">
        <p *ngIf="showTips">{{'search.tips.description' | translate}}</p>
        <ul *ngIf="showTips">
            <li *ngFor="let tip of tips">{{tip}}</li>
        </ul>
        <p *ngIf="showNotFound">
        {{'search.notFoundPrompt.prefix' | translate}} 
        <ion-text color="danger">
            "{{keywords}}" {{'search.notFoundPrompt.notFound' | translate}}
        </ion-text>
        </p>
    </mat-tab>
</mat-tab-group>

<mat-card class="search-result" *ngFor="let book of bookList">
    <ion-button color="success" size="small" class="save-cloud-book" (click)="saveCloudBook(book)">
        <ion-icon name="magnet-outline"></ion-icon>{{'home.search.putItOnShelf' | translate}}
    </ion-button>
    <mat-card-header>
        <img mat-card-avatar 
             (error)="onImageError($event)"
             [src]="book.writerAvatarUrl" />
        <mat-card-title>
            {{book.fullName.length > 48 ? book.fullName.slice(0, 47)+'...' : book.fullName}}
        </mat-card-title>
        <mat-card-subtitle>
            {{book.writerName}}
        </mat-card-subtitle>
    </mat-card-header>

    <mat-card-content *ngIf="book.desc.length > 0">
        <mat-label><b>“</b>{{book.desc.length > 256 ? book.desc.slice(0,256)+'...' : book.desc}}<b>”</b></mat-label>
    </mat-card-content>

    <mat-card-footer fxLayout="row" fxLayoutAlign="none stretch" fxLayoutGap="50px">
        <ion-label fxFlexOffset="5">
            {{'home.search.stars' | translate}}<ion-icon name="star"></ion-icon>：<i>{{book.stars}}</i>
        </ion-label>
        <ion-label>
            {{'home.search.dateUpdated' | translate}}<i>
                <b>{{book.dateUpdated | stringToDate | readableDate | async}}</b> - {{book.dateUpdated | date : 'yyyy-MM-dd HH:mm:ss' : 'GMT+8' }}</i>
        </ion-label>
    </mat-card-footer>
</mat-card>
<div *ngIf="searching" fxFlexAlign="center">
    <ion-icon src="assets/images/loader.svg" size="large"></ion-icon>
</div>
